import React from 'react';
import { ConfigProvider, Layout } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import RulesManager from './components/RulesManager';
import FunctionTestPanel from './components/FunctionTestPanel';
import StatusBar from './components/StatusBar';
import './App.css';

const { Content, Footer } = Layout;

const App: React.FC = () => {
  return (
    <ConfigProvider locale={zhCN}>
      <Layout style={{ minHeight: '100vh', background: '#f5f6fa' }}>
        <Content style={{ padding: '32px 0', maxWidth: 1400, margin: '0 auto', width: '100%' }}>
          <div style={{ display: 'flex', gap: 24 }}>
            <div style={{ flex: 2, minWidth: 0 }}>
              <RulesManager />
            </div>
            <div style={{ flex: 1, minWidth: 320 }}>
              <FunctionTestPanel />
            </div>
          </div>
        </Content>
        <Footer style={{ background: '#f0f0f0', borderTop: '1px solid #e0e0e0', textAlign: 'right', padding: '8px 32px', position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 100 }}>
          <StatusBar />
        </Footer>
      </Layout>
    </ConfigProvider>
  );
};

export default App;
